<template>
    <div>
        <el-form :model="form" inline>
          <el-form-item label="统一社会信用代码"></el-form-item>
          <el-form-item label="操作类型">
              <el-select v-model="selectOperas" placeholder="请选择">
                  <el-option label="授权" value="0"></el-option>
                  <el-option label="取消授权" value="1"></el-option>
                  <el-option label="同步更新" value="2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="searchLogData">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table 
            :data="tableData"
            stripe
        >
          <el-table-column label="序号" prop="rn" align="center" width="60"></el-table-column>
          <el-table-column label="操作类型" prop="operaType" align="center"></el-table-column>
          <el-table-column label="统一社会信用代码" prop="code" align="center"></el-table-column>
          <el-table-column label="操作前值" prop="preValue" align="center" width="150"></el-table-column>
          <el-table-column label="操作后值" prop="postValue" align="center" width="150"></el-table-column>
          <el-table-column label="操作人" prop="authName" align="center" width="150"></el-table-column>
          <el-table-column label="操作时间" prop="time" align="center"></el-table-column>
          <el-table-column label="操作ip" prop="address" align="center"></el-table-column>
        </el-table>
        <el-pagination 
            class="paging"
            background
            layout="sizes, prev, pager, next, jumper, ->, total"
            :total="paging.total" 
            :current-page="paging.page" 
            :page-sizes="[10, 20, 50, 100]"
            :page-size="paging.size" 
            @prev-click="onPrevClick"
            @next-click="onNextClick"
            @current-change="onPagingChange" 
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "CollapseLogInfo",
    data(){
        return {
            form: {},
            selectOperas: [],
            tableData: [],
            paging: {
                total: 0,
                size: 0,
            },
        }
    },
    created(){
        this.getData();
    },
    methods: {
        searchLogData(){
            console.log('searchLogData')
        },
        onPrevClick(currentPage){
            console.log(currentPage)
        },
        onNextClick(currentPage){
            console.log(currentPage)
        },
        onPagingChange(currentPage){
            console.log(currentPage)
            this.getData({

            })
        },
        getData(){
            this.$http.post(`http://localhost:3000/mock/auth-log/list`)
                .then(({data}) => {
                    this.paging.total = data.total;
                    this.paging.size = data.rows.length || 10
                    this.tableData = data.rows;
                })
        },
    },
}
</script>
<style scoped>
.paging {
    margin-top: 15px;
}
</style>